import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, ImageBackground, FlatList, TouchableOpacity, TextInput } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign, Feather } from '@expo/vector-icons';
import './global.js';
import Efamily from './pages/Efamily.js';
import Classifaction from './pages/Classifaction';
import Shopping from './pages/Shopping';
import User from './pages/User';
import Home from './pages/Home'

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const TabBar = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#f23030',
    }}>
    <Tab.Screen
      options={{
        title: '首页',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name='home' color={color} size={size} />
        ),
        headerShown: false
      }}
      name='Home'
      component={Home}
    />
    <Tab.Screen
      options={{
        title: '商品分类',
        tabBarIcon: ({ color, size }) => (
          <Feather name="grid" color={color} size={size} />
        )
      }}
      name='Classifaction'
      component={Classifaction}
    />
    <Tab.Screen
      options={{
        title: '购物车',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name='shoppingcart' color={color} size={size} />
        )
      }}
      name='Shopping'
      component={Shopping}
    />
    <Tab.Screen
      options={{
        title: '个人中心',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name='user' color={color} size={size} />
        )
      }}
      name='User'
      component={User}
    />
  </Tab.Navigator>
)
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f23030',
          },
          // headerBackVisible: true,
          headerTitleAlign: 'center',//标题栏文本居中
          headerTintColor: 'white',//标题栏文本颜色
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}>
        <Stack.Screen
          options={{ headerShown: false }}
          name='Root' component={TabBar} />
        <Stack.Screen name='Efamily' component={Efamily} />
      </Stack.Navigator>
    </NavigationContainer >
  );
}